<template>
<div id="app">
    <h1>todolist</h1>
    <!--AddNew 为添加组件-->
    <AddNew @submitNewItem="addNewItem"></AddNew>
    <!--TheList 为代办事项和完成事项组件-->
    <TheList @handleJudge="toDone":list="todoList"></TheList>
    <hr/>
    <TheList @handleDelete="toDelete":list="doneList":listType="true"></TheList>
</div>
</template>

<script>
import AddNew from "@/components/AddNew.vue";
import TheList from "@/components/TheList.vue";

export default {
    name: "TodoList",
    data(){
        return{
         todoList:[],
         doneList:[],
        }
    },
    methods:{
        // 是将由AddNew.vue 传送的数据添加到待办事项todoList数组中
        addNewItem(newItem){
            this.todoList.push(newItem)
        },
        // 将todoList数据传送到，完成事项doneList数组中，并删除自身
        toDone(index){
            this.doneList.push(this.todoList.splice(index,1)[0]);
        },

        toDelete(index){
            this.doneList.splice(index,1)
        }
    },
    components: {
       AddNew,TheList
    },
}
</script>

<style scoped>

</style>